<template>
  <div id="app">
    <div>
      功能介绍：点击哪个组件就将对应的name传给app组件
    </div>
    <h1>你好啊！{{message}}</h1>
    <School @getName="getName" @demo="m1" />
    <!-- <Student @getName="getName"  /> -->
    <Student ref="student" @click.native="show" />  
    <!-- 组件使用原生事件需要用native配合使用 -->
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/StudentProps.vue'

export default {
  name: 'App',
  components: {
    School, Student
  },
  data () {
    return {
      message:'',
    }
  },
  methods: {
    getName(val) {
      console.log([...arguments]);
      this.message = val
    },
    m1() {
      console.log('触发了m1事件');
    },
    show() {
      alert(123)
    }
  },
  mounted() {
    this.$refs['student'].$on('getName',this.getName)
    // this.$refs['student'].$once('getName',this.getName) // 只触发一次 
    // 通过这种方式添加自定义事件，要么回调函数写在methods中，要么写成箭头函数，否则this的指向会出问题
  },
}
</script>

<style>
  #app{
    background-color: #e3e3e3;
  }
</style>
